<template>
    <div class="com-cnt">
        <div class="expbg3">
            <div class="fuliIntro">
                <p @click="viewIntro">查看体验会员福利说明 <span></span></p>
            </div>
            <div class="boxs">
                <div class="anbtn clearfix">
                    <div class="list" @click="getArry.amount='100'" :class="{'active':getArry.amount=='100'}">100
                        <span>元</span>
                    </div>
                    <!-- 测试充值 -->
                    <!-- <div class="list fl" @click="getArry.amount='0.01'" :class="{'active':getArry.amount=='0.01'}">0.01
                        <span>元</span>
                    </div> -->
                    <div class="list active submitBtn" style="float:right" @click="gotoRecords(getArry.amount,userToken,getArry.pay_type)">确认</div>
                </div>
            </div>
            <div class="heights">
                <span @click="getArry.pay_type='wx'">
                    <button class="wechat"><input name="pay" type="radio" checked="getArry.pay_type='wx'"></button>
                </span>
                <!-- <span @click="getArry.pay_type='hxzf'">
                    <button class="hxzf"><input name="pay" type="radio"></button>
                </span> -->
                <span @click="getArry.pay_type='zfb'">
                    <button class="zfb"><input name="pay" type="radio"></button>
                </span>
            </div>
        </div>
        <!--充值金额-->
        
        <div class="footbtn" v-show="uthenticationStatus==3">
            <router-link :to="{path:'newrecharge'}" tag="div" class="tonewrecharge"></router-link>
        </div>
        <div class="footbtn" v-show="uthenticationStatus==2">
            <router-link :to="{path:'shiming'}" tag="div" class="tonewrecharge"></router-link>
        </div>

        <form id="form" action="" method="post">
            <input id="pGateWayReq" name="pGateWayReq" type="hidden" />
        </form>
        <div class="mask" :class="{hidemask:hidemaskFlag}">
            <div class="alertshow">
                <div class="back" @click="hidemaskFlag=true">返回</div>
            </div>
        </div>
    </div>
</template>

<script>
import http from "@/assets/js/axios";
import { domain } from '@/assets/js/config'
import $ from 'jquery'
// import { maskTips } from '@/assets/js/dom'
import { maskTips, maskCallback } from '@/assets/js/dom'
export default {
    data() {
        return {
            userInfow: '',
            userToken: '',
            amounts: '100',
            getArry: {
                pay_type: 'wx',
                amount: '100',
            },
            lists: '',
            hidemaskFlag: true,
            uthenticationStatus: localStorage.getItem('uthenticationStatus')
        }
    },
    components: {

    },
    mounted() {
        var that = this
        let userToken = localStorage.getItem("token") || ''
        this.userToken = userToken
        //this.getReason();
        maskCallback(function () {
            that.$router.push('/userinfo')
        }, 'comp-mask-btnAleft-gotoshiming', 'comp-mask-btnAright')
        
    },
    
    methods: {
        direct: function (val) {
            this.$router.push({ path: '/' + val });
        },

        // 充值
        gotoRecords: function (pid, token, type) {
            // console.log(this.getArry);
            // 是否实名

            let statu = localStorage.getItem("uthenticationStatus") || ''
            //充一百不需要实名,去掉实名认证
            // if (statu == 2) {
            //     maskTips({ id: "payfail" + new Date().getTime(), title: '温馨提示', btnCls: 'comp-mask-btnAleft-gotoshiming', btnTxt: '确认', btnTxt2: '取消', txt: "请先去实名" })
            //     // this.$router.push('/userinfo')
            //     return false;
            // }

            // 充值
            // if (this.getArry.amount < 0.1) {
            //     maskTips({ id: "too-littlecash-1", txt: "提现金额不能小于0.1元" })
            // } else {
                if (type == 'wx') {
                    var userAgent = navigator.userAgent.toLowerCase();
                    if (/micromessenger/gi.test(userAgent)) {
                        window.open(domain + "/xshk/f/assets/goWxPay?token=" + this.userToken + "&amount=" + this.getArry.amount, '_parent')
                    } else {
                        $.ajax({
                            url: domain + "/xshk/f/assets/wxRecharge?token=" + this.userToken + "&amount=" + this.getArry.amount,
                            data: {'assetsType':1},
                            type: "get",
                            dataType: "json",
                            xhrFields: { withCredentials: true },
                            crossDomain: true,
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded',
                                // 'Referer':'http：//www.xukanghui.com'
                            },
                            
                            success: function (data) {
                                // console.log(data.data)
                                if (data) {
                                    window.open(data.data.mwebUrl, '_parent')
                                } else {
                                    console.log("数据为空");
                                }
                            },
                            error: function () {
                                console.log("失败");
                            }
                        })
                    }
                } else if (type == 'hxzf') {
                    $.ajax({
                        url: domain + "/xshk/f/assets/recharge?token=" + this.userToken + "&amount=" + this.getArry.amount + "&pay_type=" + this.getArry.pay_type,
                        data: {'assetsType':1},
                        type: "post",
                        dataType: "json",
                        xhrFields: { withCredentials: true },
                        crossDomain: true,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                            // 'Referer':'http：//www.xukanghui.com'
                        },
                        // beforeSend: function (xhr) {   //beforeSend定义全局变量
                        //     xhr.setRequestHeader("Referer", "http://www.xukanghui.com");
                        // },
                        success: function (data) {
                            // console.log(data);
                            if (data.code == 0) {
                                $("#form").attr("action", data.data.ipsUrl);
                                $("#pGateWayReq").val(data.data.pGateWayReq);
                                document.getElementById("form").submit();
                            } else {
                                maskTips({ id: "too-littlecash-2", txt: data.message })
                            }
                        },
                        error: function () {
                            console.log("失败");
                        }

                    })
                } else if (type == 'zfb') {
                    this.$router.push({ path: '/rechargeMange', query: { 'amount': pid, 'userToken': token,'assetsType':1 } })
                }
            //}
        },
        viewIntro(){
            this.hidemaskFlag = false
        }
    }
}
</script>

<style lang="stylus" scoped>
.com-cnt
    width 100%
    height 100%
    background: url("../../assets/imgs/recharge/exprecharge.png") no-repeat
    background-size 100% 100%
    padding-top 215px
    .expbg3
        width 338px
        height 182px
        margin-left 17px
        margin-right 21px
        background url("../../assets/imgs/recharge/expbg3.png") no-repeat
        background-size 100% 100%
        .fuliIntro
            width 323px
            margin-left 8px 
            height 40px
            border-bottom 1px dashed #999
            p
                width 250px
                height 32px
                line-height 18px
                text-align right
                color #FE0100
                padding 14px 11px 0 0
                font-size 18px
                font-family PingFangSC-Regular
                float right
                span 
                    color #fff
                    width 14px
                    height 14px
                    text-align center
                    line-height 14px
                    display inline-block
                    background url("../../assets/imgs/recharge/fuliwhy.png")
                    background-size 100% 100%
/*充值金额*/
.boxs {
    padding: 21px 0 0 0;
    box-sizing: border-box;
}
.boxs h5 {
    // margin-top: 0.4rem;
    font-size: 0.3rem;
    font-weight: 500;
    color: #3b3b3b;
    /* font-family: "PingFang-SC-Medium"; */
}
.boxs .dl {
    display: inline-block;
    height: 1rem;
    z-index: 9;
    /* font-family: "PingFang-SC-Heavy"; */
    font-size: 0.6rem;
    line-height: 0.6rem;
    font-weight: 600;
    float: left;
    padding-top: 10px;
}
::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #999;
    font-size: 0.45rem;
    line-height: 0.6rem;
    text-align: left;
    font-weight: 600;
    /* font-family: "PingFang-SC-Heavy"; */
}
/*弹性盒父元素设置*/
.boxs .anbtn {
    /* width: 100%;
    height: 2.2rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; */
    /* justify-content: space-between; */
}
.boxs .anbtn div.list {
    width: 1.96rem;
    height: 36px;
    line-height: 36px;
    background: #fff;
    border: 1px solid #fd8e00;
    border-radius: 5px;
    color: #fd8e00;
    font-family: "PingFang-SC-Regular";
    font-size: 0.4rem;
    margin-left: 40px;
    margin-bottom: 4px;
    text-align: center;
    float left
}
.boxs .anbtn div.submitBtn {
    margin-right 40px
}
.boxs .anbtn div span {
    font-size: 0.3rem;
}
.boxs .anbtn div.active {
    background: #fd8e00;
    color: #fff;
}

.heights {
    width: 100%;
    height: 1.2rem;
    line-height 30px
    padding: 0 0 0 0;
    box-sizing: border-box; 
}
.heights span {
    display inline-block
    line-height 30px
    height 30px
    margin-left 38px
} 
.heights button {
    position: relative;
}
.heights button input {
    width: 20px;
    height: 20px;
    position: absolute;
    top: -3px;
    left: -30px;
}
.heights .zfb {
    padding: 0;
    width: 1.2rem;
    height: 0.4rem;
    border: none;
    outline: none;
    background: url("../../assets/imgs/recharge/zfb.png") no-repeat;
    margin-left: 0.7rem;
    background-size: 100% 100%;
}
.heights span .wechat {
    padding: 0;
    width: 1.2rem;
    height: 0.4rem;
    border: none;
    outline: none;
    background: url("../../assets/imgs/recharge/wechat.png") no-repeat;
    margin-left: 0.7rem;
    background-size: 100% 100%;
}
.heights span .hxzf {
    padding: 0;
    width: 1.5rem;
    height: 0.4rem;
    border: none;
    outline: none;
    background: url("../../assets/imgs/recharge/hxzf.png") no-repeat;
    margin-left: .7rem;
    background-size: 100% 100%;
}
.footbtn
    width 100%
    height 60px
    padding-left 18px
    font-weight 500 
    margin-top 26px
.footbtn .tonewrecharge
    width 336px
    height 60px
    background: url("../../assets/imgs/recharge/submitbtn.png") no-repeat;
    background-size 100% 100%
.footbtn .btn {
    float: right;
    width: 163px;
    height: 48px;
    line-height: 48px;
    border: none;
    font-size: 0.35rem;
    /* outline: none; */
    text-align: center;
    background: url("../../assets/imgs/recharge/expsubmit.png") no-repeat;
    background-size 100% 100%
    border-radius: 5px;
    color: #fff;
    /* font-family: "PingFang-SC-Regular"; */
}
.mask
    position: fixed;
    box-sizing: border-box;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    color: rgb(232, 232, 232);
    font-family: Menlo, Consolas, monospace;
    font-size: large;
    line-height: 1.2;
    white-space: pre-wrap;
    overflow: auto;
    z-index 99
    .alertshow
        width 275px
        height 359px
        position relative
        top 133px
        left 51px
        background url("../../assets/imgs/recharge/tyalertbg.png") no-repeat
        background-size 100% 100%
        .back
            width 161px
            height 47px
            font-size 18px
            line-height 47px
            text-align center
            position absolute 
            left 58px
            bottom -23px
            background url("../../assets/imgs/recharge/back.png") no-repeat
            background-size 100% 100%
            color #C72200
.hidemask
    display none
</style>